<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝海应用中心</title>
    <!-- 修复资源引入路径，使用CDN确保资源可访问 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="/static/css/font-awesome.min.css" rel="stylesheet">
    <script src="/static/js/chart.umd.min.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/css/css2.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        dark: '#1D2129',
                        ocean: {
                            50: '#E6F4FF',
                            100: '#CCE8FF',
                            200: '#99D1FF',
                            300: '#66B9FF',
                            400: '#33A1FF',
                            500: '#0088FF',
                            600: '#0066CC',
                            700: '#004C99',
                            800: '#003366',
                            900: '#001A33'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .app-card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-ocean-500 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-ocean-600 focus:ring-2 focus:ring-ocean-400 focus:outline-none;
            }
            .btn-secondary {
                @apply bg-white text-dark border border-gray-300 font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-gray-50 focus:ring-2 focus:ring-gray-300 focus:outline-none;
            }
            .input-field {
                @apply border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-ocean-400 focus:border-ocean-500 outline-none transition-all duration-300;
            }
            .captcha-image {
                @apply h-10 rounded-lg cursor-pointer border border-gray-300;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 登录页面 -->
    <div id="login-page" class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-ocean-50 to-ocean-100">
        <div class="w-full max-w-md">
            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <!-- 登录表单 -->
                <div class="p-8">
                    <div class="text-center mb-8">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-ocean-100 mb-4">
                            <i class="fa fa-cubes text-ocean-500 text-3xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold text-dark">蓝海应用中心</h2>
                        <p class="text-gray-500 mt-2">一站式应用聚合平台</p>
                    </div>
                    
                    <!-- 登录方式切换 -->
                    <div class="flex mb-6">
                        <button id="password-login-tab" class="flex-1 py-2 text-center font-medium text-ocean-500 border-b-2 border-ocean-500">
                            用户名密码登录
                        </button>
                        <button id="phone-login-tab" class="flex-1 py-2 text-center font-medium text-gray-500 border-b-2 border-transparent">
                            手机号登录
                        </button>
                    </div>
                    
                    <!-- 用户名密码登录表单 -->
                    <div id="password-login-form">
                        <div class="mb-4">
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-user text-gray-400"></i>
                                </div>
                                <input type="text" id="username" class="input-field pl-10 w-full" style="padding-left: 26px;" placeholder="请输入用户名">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-lock text-gray-400"></i>
                                </div>
                                <input type="password" id="password" class="input-field pl-10 w-full" style="padding-left: 26px;" placeholder="请输入密码">
                                <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600" id="toggle-pwd">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="flex items-center justify-between mb-6">
                            <div class="flex items-center">
                                <input id="remember-me" type="checkbox" class="h-4 w-4 text-ocean-500 focus:ring-ocean-400 border-gray-300 rounded">
                                <label for="remember-me" class="ml-2 block text-sm text-gray-700">记住我</label>
                            </div>
                            <a href="#" class="text-sm text-ocean-500 hover:text-ocean-600">忘记密码?</a>
                        </div>
                        
                        <button type="button" id="password-login-action" class="btn-primary w-full py-3 mb-4" disabled>登录</button>
                    </div>
                    
                    <!-- 手机号登录表单 -->
                    <div id="phone-login-form" class="hidden">
                        <div class="mb-4">
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-phone text-gray-400"></i>
                                </div>
                                <input type="tel" id="phone" class="input-field pl-10 w-full" style="padding-left: 26px;" placeholder="请输入手机号">
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="graphic-code" class="block text-sm font-medium text-gray-700 mb-1">图形验证码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-picture-o text-gray-400"></i>
                                </div>
                                <input type="text" id="graphic-code" class="input-field pl-10 w-full pr-32" style="padding-left: 26px;" placeholder="请输入图形验证码">
                                <img id="captcha-image" src="https://picsum.photos/120/40?random=1" alt="图形验证码" class="captcha-image absolute inset-y-0 right-0 mr-1">
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <label for="code" class="block text-sm font-medium text-gray-700 mb-1">短信验证码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-shield text-gray-400"></i>
                                </div>
                                <input type="text" id="code" class="input-field pl-10 w-full pr-32" style="padding-left: 26px;" placeholder="请输入短信验证码">
                                <button type="button" id="get-code-btn" class="absolute inset-y-0 right-0 mr-1 bg-ocean-100 text-ocean-500 px-3 rounded-lg hover:bg-ocean-200 transition-colors" disabled>
                                    获取验证码
                                </button>
                            </div>
                        </div>
                        
                        <button type="button" id="phone-login-action" class="btn-primary w-full py-3 mb-4" disabled>登录</button>
                    </div>
                    
                    <!-- 注册提示 -->
                    <div class="text-center text-sm text-gray-500">
                        <p>没有账号？请联系管理员添加</p>
                        <p class="text-ocean-500 mt-1">管理员邮箱：admin@blueocean.com</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主内容区 (初始隐藏) -->
    <main id="main-content" class="container mx-auto px-4 pt-24 pb-16 hidden">
        <!-- 欢迎区域 -->
        <section class="mb-10">
            <div class="bg-gradient-to-r from-ocean-100 to-blue-100 rounded-2xl p-6 md:p-8">
                <div class="flex flex-col md:flex-row items-center justify-between">
                    <div class="mb-6 md:mb-0">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">欢迎回来，张三！</h2>
                        <p class="text-gray-600 mb-4 max-w-2xl">今天是 <span id="current-date" class="font-medium"></span>，你有 3 个待办事项和 5 个通知需要查看。</p>
                        <div class="flex flex-wrap gap-3">
                            <button class="bg-ocean-500 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 hover:bg-ocean-600 focus:ring-2 focus:ring-ocean-400 focus:outline-none">
                                <i class="fa fa-plus mr-2"></i>添加应用
                            </button>
                            <button class="btn-secondary">
                                <i class="fa fa-cog mr-2"></i>个性化设置
                            </button>
                        </div>
                    </div>
                    <div class="w-full md:w-auto">
                        <img src="https://picsum.photos/id/180/600/300" alt="应用统计图表" class="rounded-lg shadow-md max-w-full h-auto">
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 (初始隐藏) -->
    <footer id="footer" class="bg-white border-t border-gray-200 hidden">
        <div class="container mx-auto px-4 py-8">
            <div class="text-center text-sm text-gray-500">
                © 2025 蓝海应用中心. 保留所有权利
            </div>
        </div>
    </footer>
    
    <script>
        const apiUrl = 'https://lhappsapi.renbenzhihui.com';
        let countdownTimer = null;

        // 页面加载完成后初始化
        $(function() {
            // 设置当前日期
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            const currentDate = new Date().toLocaleDateString('zh-CN', options);
            $('#current-date').text(currentDate);
        });

        // 登录方式切换
        $('#password-login-tab').on('click', function() {
            $(this).addClass('text-ocean-500 border-ocean-500').removeClass('text-gray-500 border-transparent');
            $('#phone-login-tab').removeClass('text-ocean-500 border-ocean-500').addClass('text-gray-500 border-transparent');
            $('#password-login-form').removeClass('hidden');
            $('#phone-login-form').addClass('hidden');
        });

        $('#phone-login-tab').on('click', function() {
            $(this).addClass('text-ocean-500 border-ocean-500').removeClass('text-gray-500 border-transparent');
            $('#password-login-tab').removeClass('text-ocean-500 border-ocean-500').addClass('text-gray-500 border-transparent');
            $('#password-login-form').addClass('hidden');
            $('#phone-login-form').removeClass('hidden');
        });

        // 密码显示/隐藏切换
        $('#toggle-pwd').on('click', function() {
            const $pwdInput = $('#password');
            const type = $pwdInput.attr('type') === 'password' ? 'text' : 'password';
            $pwdInput.attr('type', type);
            $(this).find('i').toggleClass('fa-eye-slash fa-eye');
        });

        // 手机号输入完成后加载图形验证码
        $('#phone').on('blur', function() {
            const mobile = $(this).val().trim();
            if (/^1[3-9]\d{9}$/.test(mobile)) {
                $('#captcha-image').attr('src', `${apiUrl}/pub/Authcode.html?u=${mobile}&t=${new Date().getTime()}`);
            } else if (mobile) {
                showToast('请输入正确的手机号');
            }
        });

        // 图形验证码刷新
        $('#captcha-image').on('click', function() {
            const mobile = $('#phone').val().trim();
            if (!mobile) {
                showToast('请先输入手机号');
                return;
            }
            $(this).attr('src', `${apiUrl}/pub/Authcode.html?u=${mobile}&t=${new Date().getTime()}`);
        });

        // 用户名/密码输入验证
        $('#username, #password').on('input', function() {
            const username = $('#username').val().trim();
            const password = $('#password').val().trim();
            $('#password-login-action').prop('disabled', !(username && password));
        });

        // 手机号输入验证
        $('#phone').on('input', function() {
            const phone = $(this).val().trim();
            const isPhoneValid = /^1[3-9]\d{9}$/.test(phone);
            $('#get-code-btn').prop('disabled', !isPhoneValid);
            checkPhoneLoginState();
        });

        // 图形验证码输入验证
        $('#graphic-code').on('input', checkPhoneLoginState);

        // 短信验证码输入验证
        $('#code').on('input', checkPhoneLoginState);

        // 检查手机号登录按钮状态
        function checkPhoneLoginState() {
            const phone = $('#phone').val().trim();
            const graphicCode = $('#graphic-code').val().trim();
            const smsCode = $('#code').val().trim();
            
            const isPhoneValid = /^1[3-9]\d{9}$/.test(phone);
            const isGraphicValid = graphicCode.length >= 4;
            const isSmsValid = smsCode.length >= 6;
            
            $('#phone-login-action').prop('disabled', !(isPhoneValid && isGraphicValid && isSmsValid));
        }

        // 获取短信验证码
        $('#get-code-btn').on('click', function() {
            const $btn = $(this);
            const phone = $('#phone').val().trim();
            const graphicCode = $('#graphic-code').val().trim();

            if (!graphicCode) {
                showToast('请输入图形验证码');
                return;
            }

            $btn.prop('disabled', true).text('发送中...');

            // 调用获取短信验证码接口
            $.ajax({
                url: `${apiUrl}/pub/sendSmsCode.html`,
                type: 'POST',
                dataType: 'json',
                data: { mobile: phone, imgcode:graphicCode},
                success: function(res) {
                    if (res.status === 0) {
                        showToast('短信验证码已发送，请注意查收');
                        startCountdown();
                    } else {
                        showToast(res.msg || '获取验证码失败，请重试');
                        $('#captcha-image').click(); // 刷新图形验证码
                        $btn.prop('disabled', false).text('获取验证码');
                    }
                },
                error: function() {
                    showToast('网络异常，请稍后重试');
                    $btn.prop('disabled', false).text('获取验证码');
                }
            });
        });

        // 验证码倒计时
        function startCountdown() {
            let seconds = 60;
            const $btn = $('#get-code-btn');
            
            if (countdownTimer) clearInterval(countdownTimer);
            
            $btn.text(`${seconds}秒后重新获取`).prop('disabled', true);
            
            countdownTimer = setInterval(() => {
                seconds--;
                $btn.text(`${seconds}秒后重新获取`);
                
                if (seconds <= 0) {
                    clearInterval(countdownTimer);
                    $btn.prop('disabled', false).text('获取验证码');
                }
            }, 1000);
        }

        // 手机号登录处理
        $('#phone-login-action').on('click', function() {
            const $btn = $(this);
            const phone = $('#phone').val().trim();
            const smsCode = $('#code').val().trim();
            const img_code = $('#graphic-code').val().trim();

            $btn.prop('disabled', true).text('登录中...');

            $.ajax({
                url: `${apiUrl}/Login/loginBySms.html`,
                type: 'POST',
                dataType: 'json',
                data: { mobile: phone, mobile_code: smsCode,img_code:img_code },
                success: function(res) {
                    if (res.status === 0) {
                        showToast('登录成功，正在跳转...');
                        localStorage.setItem('token', res.data.token);

                        window.location.href = '/index.html';
                    } else {
                        showToast(res.msg || '登录失败，请重试');
                        $btn.prop('disabled', false).text('登录');
                    }
                },
                error: function() {
                    showToast('网络异常，请检查网络后重试');
                    $btn.prop('disabled', false).text('登录');
                }
            });
        });

        // 用户名密码登录处理
        $('#password-login-action').on('click', function() {
            const $btn = $(this);
            const username = $('#username').val().trim();
            const password = $('#password').val().trim();

            $btn.prop('disabled', true).text('登录中...');

            $.ajax({
                url: `${apiUrl}/Login/loginByPwd.html`,
                type: 'POST',
                dataType: 'json',
                data: { username: username, password: password },
                success: function(res) {
                    if (res.status === 0) {
                        showToast('登录成功，正在跳转...');
                        localStorage.setItem('token', res.data.token);
                        setTimeout(() => {
                            $('#login-page').addClass('hidden');
                            $('#main-content, #footer').removeClass('hidden');
                        }, 1500);
                    } else {
                        showToast(res.msg || '用户名或密码错误');
                        $btn.prop('disabled', false).text('登录');
                    }
                },
                error: function() {
                    showToast('网络异常，请检查网络后重试');
                    $btn.prop('disabled', false).text('登录');
                }
            });
        });

        // 显示提示消息
        function showToast(message) {
            $('.toast-message').remove();
            
            const toast = $(`
                <div class="toast-message fixed top-4 left-1/2 transform -translate-x-1/2 
                            bg-dark text-white px-4 py-2 rounded-lg shadow-lg z-50 
                            transition-all duration-300 opacity-0 translate-y-[-10px]">
                    ${message}
                </div>
            `);
            $('body').append(toast);
            
            setTimeout(() => {
                toast.css({ opacity: '1', transform: 'translate(-50%, 0)' });
            }, 10);
            
            setTimeout(() => {
                toast.css({ opacity: '0', transform: 'translate(-50%, -10px)' });
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
</body>
</html>